<template>
	<view class="container">
		 <view class="custom-item">
		        <view style="padding:15rpx 24rpx">
		            <view style="color: #808080;font-size: 24rpx;">
		                    <view class="display-flex display-flex-justify-space-between display-flex-align-center" style="height:60rpx">
		                        <view class="display-flex display-flex-align-center" style="height:40rpx">
		                            <view style="width:66rpx">{{dzList.startTime}}</view>
		                            <view class="search-input search-input-start">
		                                <view class="divider-line divider-line-absolute-2"></view>
		                            </view>
		                            <view class="display-flex display-flex-align-center">
		                                <view class="single-line-ellipsis  font-size-30" style="color: #1b1b1b;max-width:500rpx">{{dzList.start}}</view>
		                            </view>
		                        </view>
		                    </view>
		                    <view class="display-flex display-flex-justify-space-between display-flex-align-center" style="height:60rpx">
		                        <view class="display-flex display-flex-align-center" style="height:40rpx">
		                            <view style="width:66rpx"></view>
		                            <view class="search-input search-input-end"></view>
		                            <view class="display-flex display-flex-align-center">
		                                <view class="ellipsis  font-size-30" style="color: #1b1b1b;max-width:500rpx">{{dzList.end}}</view>
		                            </view>
		                        </view>
		                    </view>
		                </view>
		        <view class="segmenting-line"></view>
		        <view class="display-flex display-flex-align-center display-flex-justify-space-between" style="height:96rpx;padding:0 24rpx">
		            <view class=" " style="font-size: 24upx;">已有{{dzList.joinNum}}人参与，参与人数达到50人开启预约线路</view>
		            <view class="display-flex display-flex-align-center" style="margin-left:50rpx;">
		              <button @click="onJoinCustom" class="custom-item-button canyu-button" v-if="!dzList.isJoin">立即定制</button>
		               <button class="custom-item-button already-canyu-button" v-if="dzList.isJoin">已定制</button>
		               <!-- <button bindtap="onCancelCustom" class="custom-item-button quxiao-canyu-button" v-if="item.is_join">取消定制</button> -->
		                <button :data-dz_id="dzList.dzId" class="custom-item-button custom-share-button" data-type="custom" openType="share" style="margin-left:24rpx">分享</button>
		            </view>
		        </view>
		    </view>
	  </view>

	  </view>
	 
	</view>
</template>

<script>
	import {mapGetters} from "vuex";
	import {toLogin} from '@/libs/login.js';
	
	import {busDzShare, onJoinCustom} from "@/api/bus.js" 
	export default{
		components:{
			
		},
		data(){
			return {
				dzList:[],
				dz_id:'',
			}
		},
	
		
		computed: mapGetters(['isLogin']),
		onShow() {
			if (!this.isLogin) {
				toLogin();
			}
					
		},
		onLoad(option){
		
		this.dz_id = option.dz_id;
		this.getList(this.dz_id);
		},
		onShareAppMessage: function onShareAppMessage(obj) {
			if (obj.from === "button") {
				var data = obj.target.dataset;
				if (data.type === "custom") {
					return {
						title: "邀请您一起参与线路定制",
						 path: 'pages/bus/ogz_share/index?dz_id='+data.dz_id,
						
					};
				}
			}
		},
		methods: {
			
			getList(){
				uni.showLoading({
					title:"请稍后"
				})
				busDzShare({dz_id:this.dz_id}).then((res) => {
					uni.hideLoading()
					this.dzList= res.data;
				}).catch((e) => {
					uni.hideLoading()
					return this.$util.Tips({
						title: e.msg
					}); 

				})
	
			},
			
			onJoinCustom(){
				var q = {
					dz_id:this.dz_id,
				}
				uni.showLoading({
					title:"请稍后"
				})
				onJoinCustom(q).then((res) => {
					uni.hideLoading()
					 this.$util.Tips({
						title: "定制成功"
					}); 
					 setTimeout(() =>{
					   uni.navigateTo({
						   url: "/pages/bus/ogz_list/index"
					   });								   						
					 },1000)
						
				}).catch((e) => {
					uni.hideLoading()
					return this.$util.Tips({
						title: e.msg
					}); 
					
				})
			}
			
		},

	}
</script>

<style lang='scss' scoped>
	page{
		background: #f1f1f1;
	}
	.container{
		height: 100%;
		 display: flex;
		overflow: hidden;
		/* background: #fff; */
	}
	.custom-item {
	    position: relative;
	    margin: 20rpx ;
	    background-color: #fff;
	    border-radius: 6rpx;
	}
	
	.custom-item-button {
	    padding: 0 18rpx;
	    height: 52rpx;
	    line-height: 52rpx;
	    color: #fff;
	    border-radius: 6rpx;
	    text-align: center;
	    font-size: 26rpx;
	    overflow: hidden;
	    margin: 0;
	}
	
	.custom-item-button.canyu-button {
	    width: 160rpx;
	    background-color: #70bc14;
	}
	
	.custom-item-button.quxiao-canyu-button {
	    width: 160rpx;
	    background-color: #70bc14;
	}
	
	.custom-item-button.already-canyu-button {
	    width: 130rpx;
	    background-color: #e4e4e4;
	}
	
	.custom-item-button.custom-share-button {
	    width: 120rpx;
	    background-color: #3391e8;
	}
	.search-input {
	    width: 12rpx;
	    height: 12rpx;
	    border-radius: 50%;
	    margin-right: 23rpx;
	    margin-left: 18rpx;
	}
	
	.search-input.search-input-start {
	    background-color: #70bc14;
	}
	
	.search-input.search-input-end {
	    background-color: #ff5d3c;
	}
	
	.search-input.search-input-address {
	    background-color: #b1b1b1;
	}
	
	.search-input-text {
	    max-width: 300rpx;
	}
	
	.search-input-text-nocontent {
	    color: rgb(173,173,173);
	}
	.segmenting-line {
	    height: 2rpx;
	    background-color: rgb(229,229,229);
	}
	.divider-line {
	    height: 140%;
	    width: 2rpx;
	    background-color: #d6d6d6;
	}
	
	.divider-line-absolute {
	    margin: 0 auto;
	    margin-top: 18rpx;
	}
	
	.divider-line-absolute-2 {
	    height: 200%;
	    margin: 0 auto;
	    margin-top: 22rpx;
	}
</style>
